<template>
  <div>
    <el-link
      type="primary"
      @click="areaPanelShow = true"
      style="margin-right: 25px"
    >
      <template v-if="curArea.code != undefined ">
        <b
        >{{ curArea.name }}
          <span>[{{ curArea.code }}]</span>
        </b>
      </template>
      <template v-else>
        <b>请选择地区</b>
      </template>
    </el-link>
    <el-drawer
      :append-to-body="true"
      title="选择地区"
      :visible.sync="areaPanelShow"
      direction="rtl"
    >
      <AreaTreeRender
        @select="areaChange"
        :use-locale="true"
        :root-code="rootCode"
        :max-level="5"
        :is-manage="false"
      ></AreaTreeRender>
    </el-drawer>
  </div>
</template>

<script>
import AreaTreeRender from "@/views/system/area/components/AreaTreeRender";
import {getByCode} from "@/api/system/area";

export default {
  name: "AreaSelect",
  components: {
    AreaTreeRender,
  },
  props: {
    value: String,

    //是否设置默认地区
    setDefaultArea: {
      type: Boolean,
      default: true
    }
  },

  data() {
    let areaInfo = this.$store.getters.areaInfo;
    return {
      rootCode: areaInfo.code,
      curArea: {
        code: '',
        name: ''
      },
      areaPanelShow: false,
    };
  },
  mounted() {
    if (this.setDefaultArea) {
      let areaInfo = this.$store.getters.areaInfo;
      this.curArea = {
        name: areaInfo.name,
        code: areaInfo.code
      }
      if (this.value) {
        this.curArea.code = this.value
        //名称
        getByCode(true,this.value).then(res=>{
          if(res.data){
            this.curArea.name = res.data.name;
          }
        })
      } else {
        // this.value = this.curArea.code
        this.areaChange(this.curArea)
      }
    }

  },
  methods: {
    areaChange(node) {
      this.curArea = {
        name: node.name,
        code: node.code,
      };
      this.$emit("input", node.code);
      this.areaPanelShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
